<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>卡片对应</title>
    <script src="jquery.min.js"></script>
</head>
<style>

    @keyframes selected {
        0%{background-color: #325923;transform:scale(1)}
        50%{background-color: #5a8b50;transform:scale(1.2)}
        100%{background-color: #99cd78;transform:scale(1)}
    /*,"transform":"scale(1.2)"*/
    /*,"transform":"scale(1.2)"*/

    }
    *{
        margin: 0;
    }
    #wrap{
        width: 470px;
        background-image: linear-gradient(#4a7577, #325923);
        margin: auto;
        padding-top:20px;
        padding-bottom: 20px;
        box-shadow: 8px 5px 10px #4a7577;
        border-radius: 6px;
    }
    #wrap li{
        padding: 0;
        list-style: none;
        height:100px;
        width:100px;
        background-color: #becda7;
        margin: 10px;
        margin-left: 0;
        display: inline-block;
        line-height: 100px;
        text-align:center;
        transition:transform .5s;
        background-repeat: no-repeat;
        background-position: center;
        border-radius: 3px;
    }

    .selectStep{
        height:50px;
        line-height: 50px;
        width: 470px;
        margin:auto;
    }
    .selectStep div{
        display: inline-block;
        height:30px;
        width: 80px;
        background-color: #3c8e34;
        text-align: center;
        line-height: 30px;
        color: #f1fff6;
        cursor: pointer;
        margin-left: 20px;
    }
    .open{
        /*width:100px;*/
        /*height:100px;*/
        transition:all 1s ease-out;
    }
</style>
<body>


<audio id="playButton" src="./img/m1.mp3" preload="preload" controls="controls" loop="loop" style="display: none">
    您的浏览器 不支持此类播放
</audio>


<div class="selectStep">
    <div onclick="simple()">简单</div>
    <div onclick="deficit()">困难</div>
    <span id="countNum" style="margin-left: 20px"></span>
</div>
<img class="successImg" onclick="hideImg()" style="z-index:2;display:none;height:200px;width: 200px;position: absolute;top:100px;left:50%;margin-left: -100px" src="./img/selectImg/success.gif" alt="">
    <ul id="wrap">

    </ul>
</body>
</html>

<script>

    function hideImg(){
        $(".successImg").hide();
    }

    $("body").one('click',function () {//点击body触发音乐
        var music=new Audio();
        music.src="./img/m1.mp3";//
        music.loop=true;
        music.play();

    });

    // voicePaly= ()=> {//触发音乐播放
    //
    // };

    initGame(4);//初始化
    function initGame(num) {
        $("#wrap").children().remove();
        for(var i = 0; i < num; i ++){
            for(var j = 0; j < num; j ++){
                $("#wrap").append(`<li onclick="turnCard($(this))"></li>`)
            }
        }
    }

    function  statisticalFieldNumber(arr) {//判断数组中有几个值相同
        return arr.reduce(function (prev, next) {
            prev[next] = (prev[next] + 1) || 1;
            return prev;
        }, {});
    }

    var arr = [];
    function checkpoint(point,randomNum){//关卡
        arr = [];
        // console.log(arr)
        for(var i = 0; i < point; ){
            // console.log(arr)
            if(arr.length<point){
                var num = Math.floor(Math.random()*randomNum)+1;
                if(!statisticalFieldNumber(arr)[num] || statisticalFieldNumber(arr)[num]<2){//卡片只有一张或没有才进数组
                    arr.push(num);
                    i ++;
                }
            }else{
                i = point;
            }
        }
        // console.log(arr)
    }
    checkpoint(16,8);//初始化关卡

    var gamePoint = "siple";
    function deficit(){//困难
        console.log('22');
        $("#wrap").css("width","700px");
        initGame(6);
        checkpoint(36,18);
        gamePoint = "dif";
        $("#countNum").text("");
        countNum = 0;
        gameSuccess = 0;
    }


    function simple(){//简单
        // voicePaly();
        $("#wrap").css("width","470px");
        initGame(4);
        checkpoint(16,8);
        gamePoint = "siple";
        $("#countNum").text("");
        countNum = 0;
        gameSuccess = 0;
    }


    var selectedArr = [];
    var selectedNum = [];
    var gameSuccess = 0;
    var countNum = 0;
    function turnCard(_this){
        if(selectedNum.length<2 && !_this.hasClass("open") && selectedNum[0]!==_this.index()){
            //每两个进行一次判断
            selectedArr.push(arr[_this.index()]);//当前图片
            selectedNum.push(_this.index());//当前index
        }
        if(selectedNum.length>=2 && selectedArr[0]!==selectedArr[1]){//不相同的图形则关闭图形
                $("#wrap li").eq(selectedNum[0]).removeAttr("class","open");
                $("#wrap li").eq(selectedNum[1]).removeAttr("class","open");
                markClose(selectedNum[0],selectedNum[1]);//index 获取指定li
                selectedNum = [];
                selectedArr = [];
        }else if(selectedNum.length>=2 && selectedArr[0]==selectedArr[1]){//两张相同的
            $("#wrap li").eq(selectedNum[0]).attr("class","open");
            $("#wrap li").eq(selectedNum[1]).attr("class","open");
            $("#wrap li").eq(selectedNum[0]).css({"background-color":"#99cd78","animation": "selected .5s ease-in 0s running"});
            $("#wrap li").eq(selectedNum[1]).css({"background-color":"#99cd78","animation": "selected .5s ease-in 0s running"});

            selectedNum = [];
            selectedArr = [];
            gameSuccess ++;
        }

        if(gamePoint=="siple" && gameSuccess==8){
            console.log("成功");
            $(".successImg").show();

            // alert("成功");
        }else if(gamePoint=="dif" && gameSuccess==18){
            $(".successImg").show();
        }else{
            if(selectedNum[0]){
                if(selectedNum[0] !==_this.index()){
                    countNum ++;
                }
                // if(!selectedNum[1]){
                //     countNum ++;
                // }
            }else{
                countNum ++;
            }

        }
        $("#countNum").text(countNum+"步");
        var url = "./img/selectImg/"+arr[_this.index()]+".png";
        _this.css({"transform":"rotateY(180deg)",});
        setTimeout(function () {
            _this.css({"background-image":"url('"+url+"')",})
        },200);

    }

    function markClose(num1,num2){//翻回卡片
        setTimeout(function () {
            $("#wrap li").eq(num1).css({"transform":"rotateY(0deg)",});
            $("#wrap li").eq(num2).css({"transform":"rotateY(0deg)",});

            setTimeout(function () {
                $("#wrap li").eq(num2).css({"background-color":"#becda7","background-image":"url('')"})
                $("#wrap li").eq(num1).css({"background-color":"#becda7","background-image":"url('')"})
            },200)
        },500)

    }
</script>
